import React, { Component } from 'react';
import './Register.scss'
import {user_register} from './utils/api'

class login extends Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            password2:'',
            radiostatus:false,
        }
    }
    render() {
        return (
            <div id='register'>
                <input type="text" className='phone' name='username' value={this.state.username} placeholder='请输入手机号' onChange={e=>this.valueChange(e)} onBlur={(e)=>{this.validation(e)}}/>
                <input type="password" className='pass' name='password' value={this.state.password} placeholder='请输入密码' onChange={e=>this.valueChange(e)}/>
                <input type="password" className='pass2' name='password2' value={this.state.password2} placeholder='请再次输入密码' onChange={e=>this.valueChange(e)}/>
                <button className='login' onClick={()=>{this.click()}}  >注册</button>
                <div className='tip'>
                    <input type="radio" name='radiostatus'  onChange={e=>this.valueChange(e)}/>我同意《用户隐私政策》
                </div>
            </div>
        );
    }

    validation(e){
        var reg=new RegExp(/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/)
        if(!(reg.test(e.target.value))){
            alert('输入的手机号格式不正确，请重新输入')
        }
        
    }
    valueChange(e){
        const target=e.target;
        const value =target.type === 'radio' ? target.checked : target.value;
        const name = target.name;
        console.log(target.checked);
        this.setState({ [name]: value },()=>{console.log(this.state);})
    }
    click(){
        if(this.state.radiostatus){
            if(this.state.password==this.state.password2){
                user_register({phone:this.state.username,pass:this.state.password}).then((res)=>{
                    alert(res.data.msg)
                })
            }else{
                alert("两次输入的密码错误，请重新输入")
            }
        }else{
            alert("请同意协议")
        }
    }
}

export default login;